<template>
  <div>
    <h2>pinia</h2>
    <Page total="100" :shownum="shownum" showpage="3" @change="change"></Page>
    <div class="table">
      <div class="tr">
        <div class="td">编号</div>
        <div class="td">用户名</div>
        <div class="td">年龄</div>
        <div class="td">操作</div>
      </div>
      <div class="tr" v-for="item in userInfo.list" :key="item.id">
        <div class="td">{{ item.id }}</div>
        <div class="td">{{ item.username }}</div>
        <div class="td">{{ item.userage }}</div>
        <div class="td" @click="userInfo.delListById(item.id)">删除</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { UserStore } from "@/stores/UserStore.js";
import { ref } from "vue";
import Page from "@/components/Page.vue";
let userInfo = UserStore();

let shownum = ref(2);

let change = (index) => {
  // userInfo.initList({ _page: index, _limit: shownum.value });
  userInfo.initList({ _page: 1, _limit: 1 });
};
</script>

<style scoped>
.table {
  width: 100%;
}
.table .tr {
  display: flex;
}
.table .tr .td {
  flex: 1;
  text-align: center;
  line-height: 40px;
  color: black;
}
</style>
